<template>
  <div class="home">
    <home-menu :activeMenu="activeTab"
               @menuSelect="menuSelect"></home-menu>
    <div class="home-right">
      <div class="right-header">
        <span :style="{color:titleColor}"
              class="right-header-title">{{title}}</span>
        <el-popover popper-class="popper-avatar"
                    placement="bottom"
                    trigger="click"
                    :show-arrow="false"
                    :hide-after="0">
          <div>
            <div class="avater-popover-item">修改头像</div>
            <div class="avater-popover-item"
                 @click="setInfo">设置信息</div>
            <div class="avater-popover-item"
                 @click="logout">退出登录</div>
          </div>
          <template #reference>
            <div class="avatar">
              <img src="@/assets/img/test_tx.png"
                   alt="头像">
            </div>
          </template>
        </el-popover>
      </div>
      <div class="right-page">
        <el-tabs type="card"
                 v-model="activeTab"
                 @tabClick="tabClick"
                 @tabRemove="tabRemove">
          <el-tab-pane v-for="(tab,index) in tabs"
                       :key="index"
                       :closable="tab.name !== 'welcome'"
                       :label="tab.label"
                       :name="tab.name">
            <router-view></router-view>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <modify-avatar></modify-avatar>
  </div>
</template>

<script>
import homeMenu from '@/components/home-menu/index.vue'
import modifyAvatar from '@/components/modify-avatar/index.vue'

export default {
  name: 'home',
  components: {
    homeMenu,
    modifyAvatar,
  },
  data() {
    return {
      titleColor: '',
      title: '欢迎',
      activeTab: 'welcome',
      tabs: [{ label: '欢迎', name: 'welcome' }], // 标签页
      tabName: {
        welcome: '欢迎',
        curriculum: '课表',
        achievement: '成绩',
        trend: '走势',
        means: '资料',
        evaluate: '评价',
        setting: '设置',
        about: '关于',
      },
    }
  },
  mounted() {
    this.$router.push({ name: 'welcome' })
  },
  watch: {
    title(newV, oldV) {
      this.titleColor = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(
        Math.random() * 256
      )})`
    },
  },
  methods: {
    // 设置个人信息
    setInfo() {
      const setTab = this.tabs.findIndex((item) => item.name == 'setting')
      if (setTab == -1) this.tabs.push({ label: '设置', name: 'setting' })
      this.activeTab = 'setting'
      this.$router.push({ name: 'setting' })
    },
    // 退出登录
    logout() {
      sessionStorage.removeItem('loginInfo')
      this.$message.success('退出登录成功!')
      this.$router.push({ name: 'login' })
    },
    // 菜单选中
    menuSelect(data) {
      const findItme = this.tabs.find((item) => item.name == data)
      if (!findItme) this.tabs.push({ name: data, label: this.tabName[data] })
      this.activeTab = data
      this.title = this.tabName[data]
    },
    // 标签点击
    tabClick(pane, ev) {
      this.title = this.tabName[pane.paneName]
      this.$router.push('/home/' + pane.paneName)
    },
    // 删除 tab 标签
    tabRemove(pane) {
      let i = null
      this.tabs = this.tabs.filter((item, index) => {
        if (item.name == pane) i = index
        return item.name != pane
      })
      if (this.activeTab == pane) {
        if (i > this.tabs.length - 1) this.activeTab = this.tabs[this.tabs.length - 1].name
        else this.activeTab = this.tabs[i].name
        this.title = this.tabName[this.activeTab]
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  height: 100vh;
  width: 100vw;
  .home-right {
    flex: 1;
    .right-header {
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #606266;
      font-size: 16px;
      font-weight: 600;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
      .right-header-title {
        font-size: 18px;
        font-weight: 600;
      }
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        line-height: 1;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .right-page {
      height: calc(100% - 60px);
    }
  }
}
</style>
<style lang="scss">
.popper-avatar {
  padding: 5px 0 !important;
  .avater-popover-item {
    padding: 5px 0;
    text-align: center;
    cursor: pointer;
    &:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>